<template>
    <table border="1">
        <tr>
            <td colspan="2" style="text-align:center;font-size:30px;">房型管理-修改</td>
        </tr>
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="Info.Rtype_Name"/>
            </td>
        </tr>
        <tr>
            <td>房型面积</td>
            <td>
                <input type="text" v-model="Info.Rtype_Size"/>
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" v-model="Info.Rtype_Price"/>
            </td>
        </tr>
        <tr>
            <td>是否有窗</td>
            <td>
                <input type="radio" :value="true" v-model="Info.Rtype_isHave"/>有
                <input type="radio" :value="false" v-model="Info.Rtype_isHave"/>无
            </td>
        </tr>
        <tr>
            <td>入住人数</td>
            <td>
                <input type="text" v-model="Info.Rtype_Num"/>
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" :value="true" v-model="Info.Rtype_State"/>启用
                <input type="radio" :value="false" v-model="Info.Rtype_State"/>停用
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <img style="width:60px;height:60px;" :src="Info.Rtype_Img"/>
                <input type="file" @change="upload"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <input type="button" value="修改" @click="updRoomType"/>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'

//创建路由实例
const router=useRouter();
const route=useRoute();

//创建生命周期钩子
onMounted(()=>{
    FanTian();
})

//创建响应式数据
const Info=ref({
    Rtype_Id:route.params.id,
    Rtype_Name:"",
    Rtype_Size:0,
    Rtype_Price:0,
    Rtype_isHave:true,
    Rtype_Num:0,
    Rtype_State:true,
    Rtype_Img:""
})

//反填
const FanTian=()=>{
    axios.get("https://localhost:7249/api/RoomType/GetRoomType",{
        params:{
            RTid:route.params.id
        }
    })
    .then(res=>{
        Info.value=res.data
    })
    .catch(err=>{
        console.log(err);
    })
}

//修改
const updRoomType=()=>{
    if(Info.value.Rtype_Name=="")
    {
        alert("房型名称不能为空");
        return;
    }
    axios.put("https://localhost:7249/api/RoomType/UpdRoomType",Info.value)
    .then(res=>{
        if(res.data>0)
        {
            alert("修改成功");
            router.push("/ShowRoomType");
        }
        else{
            alert("修改失败");
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

//上传图片
const upload=(e:any)=>{
    var file=e.target.files[0];
    var fd=new FormData();
    fd.append("Img",file);
    axios.post("https://localhost:7249/api/UpFile/UpLoad",fd)
    .then(res=>{
        Info.value.Rtype_Img=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>